<template>
  <div class="table">
    <el-table
      :data="tableData1"
      style="width: 100%;"
    >
      <div v-for="(item, key) in tableHeads" :key=key>
        <el-table-column :prop=item.props :label=item.labels align="center"/>
      </div>
    </el-table>
    <!-- <el-table
      :data="tableData1"
      style="width: 100%;"
      row-key="id"
    >
      <el-table-column prop="name" label="员工姓名" align="center"/>
      <el-table-column prop="username" label="账号" align="center" />
      <el-table-column prop="phone" label="手机号" align="center" />
      <el-table-column prop="status" label="账号状态" align="center" />
      <el-table-column label="操作" align="center">
        <template>
          <el-button type="text" size="default">
            Edit
          </el-button>
          <el-divider direction="vertical" />
          <el-button size="default" type="text" style="color: red">
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table> -->
  </div>
</template>

<script>
export default {
  name: 'data-table',
  props: {

  },
  data() {
    return {
      tableHeads:[
        {props: "name", labels: "员工姓名"},
        {props: "username", labels: "账号"},
        {props: "phone", labels: "手机号"},
        {props: "status", labels: "状态"},
        {props: "edit", labels: "操作"},
      ],
      tableData1: [
        {name: '1', username: '111', phone: '11111111', status: 0, edit: ['update', 'delete']},
        {name: '2', username: '1222', phone: '11222222', status: 0, edit: ['update', 'delete']},
      ]
    }
  }
}
</script>

<style lang="scss" scoped>


</style>
